<template>
    <div
        class="menu-button"
        style="background: linear-gradient(265deg, #e8b878 0%, #c48736 100%)">
        <div class="label">
            <slot></slot>
        </div>
        <div
            style="
                background-image: url('/img/main/3dcube2.png');
                height: 100%;
                width: 100%;
                z-index: 10;
                position: absolute;
                background-size: 20%;
                background-repeat: no-repeat;
                background-position: center 0px;
                margin-top: 60px;
            "></div>
    </div>
</template>

<script setup lang="ts"></script>
<script lang="ts"></script>

<style lang="scss" scoped>
@use 'src/assets/scss/main.scss' as *;
.menu-button {
    height: 200px;
    // background-color: rgba(0, 128, 0, 1);
    border-radius: 6px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;

    @include animate_trans();
    &:hover {
        //opacity: 0.7;
        // box-shadow: 10px;
        // @mixin base-box-shadow-10 {
        //     box-shadow: rgb(255, 255, 255) 0 0 10px;
        // }
        @include base-box-shadow-10;
    }

    &:active {
        //transform: translate(2px,2px);
        @include hover-move(2px);
    }

    .label {
        display: block;
        position: absolute;
        left: 30px;
        bottom: 16px;
        font-size: 22px;
        // align-items: center;
    }
}
</style>
